<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理中心 - 物流追踪系统</title>
    <link rel="stylesheet" href="../../css/styles.css">
    <link rel="stylesheet" href="../../css/responsive.css">
    <link rel="stylesheet" href="../../css/management.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">



</head>
<body>
<header>
    <div class="container header-container">
        <div class="logo">
            <i class="fas fa-truck-fast"></i>
            <h1>物流追踪系统</h1>
        </div>
        <nav class="main-nav">
            <ul>
                <li><a href="../../index.html"><i class="fas fa-home"></i> 首页</a></li>
                <li><a href="../../pages/user/dashboard.html"><i class="fas fa-user"></i> 用户中心</a></li>
                <li><a href="../../pages/courier/dashboard.html"><i class="fas fa-truck"></i> 物流员中心</a></li>
                <li><a href="dashboard.html"><i class="fas fa-cogs"></i> 管理员中心</a></li>
                <li><a href="#" id="logout-btn"><i class="fas fa-sign-out-alt"></i> 退出登录</a></li>
            </ul>
        </nav>
        <button class="mobile-menu-btn">
            <i class="fas fa-bars"></i>
        </button>
    </div>
</header>

<main class="container" id="app-container">
    <section class="hero">
        <div class="hero-content">
            <h2 id="page-title">管理中心</h2>
            <p id="page-description">管理系统用户、物流信息和包裹数据</p>
        </div>
    </section>

    <section class="management-container">
        <div class="tab-container" id="tab-container">
            <button class="tab-button" data-tab="users"><i class="fas fa-users"></i> 用户管理</button>
            <button class="tab-button" data-tab="couriers"><i class="fas fa-truck"></i> 物流员管理</button>
            <button class="tab-button" data-tab="packages"><i class="fas fa-boxes"></i> 包裹管理</button>
            <button class="tab-button" data-tab="roles"><i class="fas fa-user-shield"></i> 角色权限</button>
            <button class="tab-button" data-tab="routes"><i class="fas fa-road"></i> 路线管理</button>
            <button class="tab-button" data-tab="exceptions"><i class="fas fa-exclamation-triangle"></i> 异常处理
            </button>
        </div>

        <!-- 编辑用户模态框 -->
        <div class="modal hidden" id="edit-user-modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>编辑用户</h3>
                    <span class="close-modal">&times;</span>
                </div>
                <div class="modal-body">
                    <form id="edit-user-form">
                        <input type="hidden" id="edit-user-id" name="id">
                        <div class="form-group">
                            <label for="edit-username">用户名</label>
                            <input type="text" id="edit-username" name="username" required
                                   placeholder="请输入用户名">
                        </div>
                        <div class="form-group">
                            <label for="edit-email">邮箱</label>
                            <input type="email" id="edit-email" name="email" required placeholder="请输入邮箱地址">
                        </div>
                        <div class="form-group">
                            <label for="edit-phone">手机号</label>
                            <input type="tel" id="edit-phone" name="phone" required placeholder="请输入手机号">
                        </div>
                        <div class="form-group">
                            <label for="edit-role">角色</label>
                            <select id="edit-role" name="role" required>
                                <option value="user">普通用户</option>
                                <option value="courier">物流员</option>
                                <option value="admin">管理员</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="edit-status">状态</label>
                            <select id="edit-status" name="status" required>
                                <option value="active">活跃</option>
                                <option value="disabled">禁用</option>
                            </select>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn-cancel" id="cancel-edit-user">取消</button>
                            <button type="submit" class="btn-submit">保存修改</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- 查看用户详情模态框 -->
        <div class="modal hidden" id="view-user-modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>用户详情</h3>
                    <span class="close-modal">&times;</span>
                </div>
                <div class="modal-body">
                    <div class="user-detail-item">
                        <label>用户ID:</label>
                        <span id="view-user-id"></span>
                    </div>
                    <div class="user-detail-item">
                        <label>用户名:</label>
                        <span id="view-username"></span>
                    </div>
                    <div class="user-detail-item">
                        <label>邮箱:</label>
                        <span id="view-email"></span>
                    </div>
                    <div class="user-detail-item">
                        <label>手机号:</label>
                        <span id="view-phone"></span>
                    </div>
                    <div class="user-detail-item">
                        <label>注册时间:</label>
                        <span id="view-regtime"></span>
                    </div>
                    <div class="user-detail-item">
                        <label>状态:</label>
                        <span id="view-status"></span>
                    </div>
                    <div class="user-detail-item">
                        <label>角色:</label>
                        <span id="view-role"></span>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn-cancel" id="close-view-user-modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 添加用户模态框 -->
        <div class="modal hidden" id="add-user-modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>添加新用户</h3>
                    <span class="close-modal">&times;</span>
                </div>
                <div class="modal-body">
                    <form id="add-user-form">
                        <div class="form-group">
                            <label for="new-username">用户名</label>
                            <input type="text" id="new-username" name="username" required
                                   placeholder="请输入用户名">
                        </div>
                        <div class="form-group">
                            <label for="new-email">邮箱</label>
                            <input type="email" id="new-email" name="email" required placeholder="请输入邮箱地址">
                        </div>
                        <div class="form-group">
                            <label for="new-phone">手机号</label>
                            <input type="tel" id="new-phone" name="phone" required placeholder="请输入手机号">
                        </div>
                        <div class="form-group">
                            <label for="new-role">角色</label>
                            <select id="new-role" name="role" required>
                                <option value="user">普通用户</option>
                                <option value="courier">物流员</option>
                                <option value="admin">管理员</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="new-password">密码</label>
                            <input type="password" id="new-password" name="password" required
                                   placeholder="请输入密码">
                        </div>
                        <div class="form-group">
                            <label for="confirm-password">确认密码</label>
                            <input type="password" id="confirm-password" name="confirmPassword" required
                                   placeholder="请确认密码">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn-cancel" id="cancel-add-user">取消</button>
                            <button type="submit" class="btn-submit">添加用户</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- 用户管理 -->
        <div class="tab-content " id="users-tab">
            <h3 class="section-title">用户管理</h3>
            <div class="card-title">
                <a href="#" class="add-button" id="add-user-btn"
                   onclick="console.log('添加用户按钮被点击 (内联事件)'); openAddUserModal(); return false;"><i
                        class="fas fa-user-plus"></i> 添加用户</a>
                <div class="search-bar">
                    <input type="text" placeholder="搜索用户名或ID...">
                    <button><i class="fas fa-search"></i> 搜索</button>
                </div>
            </div>


            <table>
                <thead>
                <tr>
                    <th>用户ID</th>
                    <th>用户名</th>
                    <th>邮箱</th>
                    <th>手机号</th>
                    <th>注册时间</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1001</td>
                    <td>张三</td>
                    <td>zhangsan@example.com</td>
                    <td>13800138000</td>
                    <td>2023-05-15</td>
                    <td>活跃</td>
                    <td class="action-buttons">
                        <button class="btn-view" data-id="1001" data-username="张三"
                                data-email="zhangsan@example.com" data-phone="13800138000" data-regtime="2023-05-15"
                                data-status="活跃" data-role="普通用户"><i class="fas fa-eye"></i></button>
                        <button class="btn-edit" data-id="1001" data-username="张三"
                                data-email="zhangsan@example.com" data-phone="13800138000" data-status="active"
                                data-role="user"><i class="fas fa-edit"></i></button>
                        <button class="btn-delete"><i class="fas fa-trash-alt"></i></button>
                    </td>
                </tr>
                <tr>
                    <td>1002</td>
                    <td>李四</td>
                    <td>lisi@example.com</td>
                    <td>13900139000</td>
                    <td>2023-06-20</td>
                    <td>活跃</td>
                    <td class="action-buttons">
                        <button class="btn-view" data-id="1002" data-username="李四" data-email="lisi@example.com"
                                data-phone="13900139000" data-regtime="2023-06-20" data-status="活跃"
                                data-role="普通用户"><i class="fas fa-eye"></i></button>
                        <button class="btn-edit" data-id="1002" data-username="李四" data-email="lisi@example.com"
                                data-phone="13900139000" data-status="active" data-role="user"><i
                                class="fas fa-edit"></i></button>
                        <button class="btn-delete"><i class="fas fa-trash-alt"></i></button>
                    </td>
                </tr>
                <tr>
                    <td>1003</td>
                    <td>王五</td>
                    <td>wangwu@example.com</td>
                    <td>13700137000</td>
                    <td>2023-07-05</td>
                    <td>禁用</td>
                    <td class="action-buttons">
                        <button class="btn-view" data-id="1003" data-username="王五" data-email="wangwu@example.com"
                                data-phone="13700137000" data-regtime="2023-07-05" data-status="禁用"
                                data-role="普通用户">
                            <i class="fas fa-eye"></i></button>
                        <button class="btn-edit" data-id="1003" data-username="王五" data-email="wangwu@example.com"
                                data-phone="13700137000" data-status="disabled" data-role="user"><i
                                class="fas fa-edit"></i>
                        </button>
                        <button class="btn-delete"><i class="fas fa-trash-alt"></i></button>
                    </td>
                </tr>
                <tr>
                    <td>1004</td>
                    <td>赵六</td>
                    <td>zhaoliu@example.com</td>
                    <td>13600136000</td>
                    <td>2023-07-20</td>
                    <td>活跃</td>
                    <td class="action-buttons">
                        <button class="btn-view" data-id="1004" data-username="赵六"
                                data-email="zhaoliu@example.com" data-phone="13600136000" data-regtime="2023-07-20"
                                data-status="活跃" data-role="普通用户"><i class="fas fa-eye"></i></button>
                        <button class="btn-edit" data-id="1004" data-username="赵六"
                                data-email="zhaoliu@example.com" data-phone="13600136000" data-status="active"
                                data-role="user"><i class="fas fa-edit"></i></button>
                        <button class="btn-delete"><i class="fas fa-trash-alt"></i></button>
                    </td>
                </tr>
                <tr>
                    <td>1005</td>
                    <td>孙七</td>
                    <td>sunqi@example.com</td>
                    <td>13500135000</td>
                    <td>2023-08-01</td>
                    <td>活跃</td>
                    <td class="action-buttons">
                        <button class="btn-view" data-id="1005" data-username="孙七" data-email="sunqi@example.com"
                                data-phone="13500135000" data-regtime="2023-08-01" data-status="活跃"
                                data-role="普通用户"><i class="fas fa-eye"></i></button>
                        <button class="btn-edit" data-id="1005" data-username="孙七" data-email="sunqi@example.com"
                                data-phone="13500135000" data-status="active" data-role="user"><i
                                class="fas fa-edit"></i></button>
                        <button class="btn-delete"><i class="fas fa-trash-alt"></i></button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>


        <!-- 物流员管理 -->
        <div class="tab-content hidden" id="couriers-tab">
            <h3 class="section-title">物流员管理</h3>
            <div class="card-title">
                <a href="javascript:void(0);" class="add-button" id="add-courier-btn"><i class="fas fa-user-plus"></i>
                    添加物流员</a>
                <div class="search-bar">
                    <input type="text" placeholder="搜索物流员姓名或ID...">
                    <button><i class="fas fa-search"></i> 搜索</button>
                </div>
            </div>

            <div id="courier-list">
                <table>
                    <thead>
                    <tr>
                        <th>物流员ID</th>
                        <th>姓名</th>
                        <th>手机号</th>
                        <th>负责区域</th>
                        <th>入职时间</th>
                        <th>已完成配送</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>2001</td>
                        <td>张三</td>
                        <td>13800138001</td>
                        <td>海淀区</td>
                        <td>2023-05-15</td>
                        <td>45</td>
                        <td>在线</td>
                        <td class="action-buttons">
                            <button class="btn-view" data-id="1" data-name="海淀区路线1" data-start-point="warehouse A"
                                    data-end-point="海淀区配送中心" data-distance="5km" data-estimated-time="30分钟"
                                    data-status="活跃"><i class="fas fa-eye"></i></button>
                            <button class="btn-edit"><i class="fas fa-edit"></i></button>
                            <button class="btn-delete"><i class="fas fa-trash-alt"></i></button>
                        </td>
                    </tr>
                    <tr>
                        <td>2002</td>
                        <td>钱七</td>
                        <td>13900139002</td>
                        <td>朝阳区</td>
                        <td>2023-06-20</td>
                        <td>8</td>
                        <td>在线</td>
                        <td class="action-buttons">
                            <button class="btn-view" data-id="2" data-name="海淀区路线2" data-start-point="warehouse A"
                                    data-end-point="海淀区配送中心" data-distance="7km" data-estimated-time="45分钟"
                                    data-status="活跃"><i class="fas fa-eye"></i></button>
                            <button class="btn-edit"><i class="fas fa-edit"></i></button>
                            <button class="btn-delete"><i class="fas fa-trash-alt"></i></button>
                        </td>
                    </tr>
                    <tr>
                        <td>2003</td>
                        <td>孙八</td>
                        <td>13700137003</td>
                        <td>西城区</td>
                        <td>2023-07-10</td>
                        <td>0</td>
                        <td>离线</td>
                        <td class="action-buttons">
                            <button class="btn-view" data-id="3" data-name="朝阳区路线1" data-start-point="warehouse B"
                                    data-end-point="朝阳区配送中心" data-distance="8km" data-estimated-time="50分钟"
                                    data-status="活跃"><i class="fas fa-eye"></i></button>
                            <button class="btn-edit"><i class="fas fa-edit"></i></button>
                            <button class="btn-delete"><i class="fas fa-trash-alt"></i></button>
                        </td>
                    </tr>
                    <tr>
                        <td>2004</td>
                        <td>周九</td>
                        <td>13600136004</td>
                        <td>东城区</td>
                        <td>2023-07-25</td>
                        <td>15</td>
                        <td>在线</td>
                        <td class="action-buttons">
                            <button class="btn-view" data-id="4" data-name="西城区路线1" data-start-point="warehouse C"
                                    data-end-point="西城区配送中心" data-distance="6km" data-estimated-time="40分钟"
                                    data-status="活跃"><i class="fas fa-eye"></i></button>
                            <button class="btn-edit"><i class="fas fa-edit"></i></button>
                            <button class="btn-delete"><i class="fas fa-trash-alt"></i></button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 添加物流员模态框 -->
        <div class="modal hidden" id="add-couriers-modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>添加新物流员</h3>
                    <span class="close-modal">&times;</span>
                </div>
                <div class="modal-body">
                    <form id="add-courier-form">
                        <div class="form-group">
                            <label for="new-courier-name">姓名</label>
                            <input type="text" id="new-courier-name" name="name" required placeholder="请输入姓名">
                        </div>
                        <div class="form-group">
                            <label for="new-courier-phone">手机号</label>
                            <input type="tel" id="new-courier-phone" name="phone" required placeholder="请输入手机号">
                        </div>
                        <div class="form-group">
                            <label for="new-courier-area">负责区域</label>
                            <input type="text" id="new-courier-area" name="area" required placeholder="请输入负责区域">
                        </div>
                        <div class="form-group">
                            <label for="new-courier-email">邮箱</label>
                            <input type="email" id="new-courier-email" name="email" required placeholder="请输入邮箱">
                        </div>
                        <div class="form-group">
                            <label for="new-courier-password">密码</label>
                            <input type="password" id="new-courier-password" name="password" required
                                   placeholder="请输入密码">
                        </div>
                        <div class="form-group">
                            <label for="confirm-courier-password">确认密码</label>
                            <input type="password" id="confirm-courier-password" name="confirmPassword" required
                                   placeholder="请确认密码">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn-cancel" id="cancel-add-courier">取消</button>
                            <button type="submit" class="btn-submit">添加物流员</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- 编辑物流员模态框 -->
        <div class="modal hidden" id="edit-couriers-modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>编辑物流员信息</h3>
                    <span class="close-modal">&times;</span>
                </div>
                <div class="modal-body">
                    <form id="edit-courier-form">
                        <input type="hidden" id="edit-courier-id" name="id">
                        <div class="form-group">
                            <label for="edit-courier-name">姓名</label>
                            <input type="text" id="edit-courier-name" name="name" required>
                        </div>
                        <div class="form-group">
                            <label for="edit-courier-phone">手机号</label>
                            <input type="tel" id="edit-courier-phone" name="phone" required>
                        </div>
                        <div class="form-group">
                            <label for="edit-courier-area">负责区域</label>
                            <input type="text" id="edit-courier-area" name="area" required>
                        </div>
                        <div class="form-group">
                            <label for="edit-courier-email">邮箱</label>
                            <input type="email" id="edit-courier-email" name="email" required>
                        </div>
                        <div class="form-group">
                            <label for="edit-courier-status">状态</label>
                            <select id="edit-courier-status" name="status" required>
                                <option value="online">在线</option>
                                <option value="offline">离线</option>
                            </select>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn-cancel" id="cancel-edit-courier">取消</button>
                            <button type="submit" class="btn-submit">保存修改</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- 查看物流员模态框 -->
        <div class="modal hidden" id="view-couriers-modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>物流员详情</h3>
                    <span class="close-modal">&times;</span>
                </div>
                <div class="modal-body">
                    <div class="courier-detail-item">
                        <label>物流员ID:</label>
                        <span id="view-courier-id"></span>
                    </div>
                    <div class="courier-detail-item">
                        <label>姓名:</label>
                        <span id="view-courier-name"></span>
                    </div>
                    <div class="courier-detail-item">
                        <label>手机号:</label>
                        <span id="view-courier-phone"></span>
                    </div>
                    <div class="courier-detail-item">
                        <label>负责区域:</label>
                        <span id="view-courier-area"></span>
                    </div>
                    <div class="courier-detail-item">
                        <label>邮箱:</label>
                        <span id="view-courier-email"></span>
                    </div>
                    <div class="courier-detail-item">
                        <label>入职时间:</label>
                        <span id="view-courier-regtime"></span>
                    </div>
                    <div class="courier-detail-item">
                        <label>已完成配送:</label>
                        <span id="view-courier-deliveries"></span>
                    </div>
                    <div class="courier-detail-item">
                        <label>状态:</label>
                        <span id="view-courier-status"></span>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn-cancel" id="close-view-courier-modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 删除物流员模态框 -->
        <div class="modal hidden" id="del-couriers-modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>确认删除</h3>
                    <span class="close-modal">&times;</span>
                </div>
                <div class="modal-body">
                    <p>确定要删除该物流员吗？此操作不可撤销。</p>
                    <p id="del-courier-name"></p>
                    <div class="modal-footer">
                        <button type="button" class="btn-cancel" id="cancel-del-courier">取消</button>
                        <button type="button" class="btn-delete" id="confirm-del-courier">删除</button>
                    </div>
                </div>
            </div>
        </div>


        <!-- 包裹管理 -->
        <div class="tab-content hidden" id="packages-tab">
            <h3 class="section-title">包裹查询</h3>
            <div class="card-title">
                <div></div>
                <div class="search-bar">
                    <input type="text" placeholder="搜索运单编号...">
                    <button><i class="fas fa-search"></i> 搜索</button>
                </div>
            </div>

            <div id="package-list">
                <table>
                    <thead>
                    <tr>
                        <th>运单编号</th>
                        <th>收件人</th>
                        <th>联系电话</th>
                        <th>收货地址</th>
                        <th>状态</th>
                        <th>物流员</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>PKG123456</td>
                        <td>张三</td>
                        <td>13800138000</td>
                        <td>北京市海淀区XX街道</td>
                        <td><span class="status-badge status-delivered">已送达</span></td>
                        <td>张三</td>
                        <td class="action-buttons">
                            <button class="btn-view" data-id="1" data-name="朝阳区路线1" data-start-point="warehouse B"
                                    data-end-point="朝阳区配送中心" data-distance="10km" data-estimated-time="50分钟"
                                    data-status="正常" onclick="console.log('按钮点击测试'); alert('按钮被点击了！');"><i
                                    class="fas fa-eye"></i></button>
                            <button class="btn-edit"><i class="fas fa-edit"></i></button>
                        </td>
                    </tr>
                    <tr>
                        <td>PKG654321</td>
                        <td>李四</td>
                        <td>13900139000</td>
                        <td>北京市海淀区XX街道</td>
                        <td><span class="status-badge status-in-transit">运输中</span></td>
                        <td>钱七</td>
                        <td class="action-buttons">
                            <button class="btn-view" data-tracking-number="PKG445566" data-sender="王五"
                                    data-receiver="赵六" data-status="运输中" data-delivery-date=""><i
                                    class="fas fa-eye"></i></button>
                            <button class="btn-edit" data-tracking-number="PKG445566" data-sender="王五"
                                    data-receiver="赵六" data-status="运输中" data-delivery-date=""><i
                                    class="fas fa-edit"></i></button>
                        </td>
                    </tr>
                    <tr>
                        <td>PKG987654</td>
                        <td>王五</td>
                        <td>13700137000</td>
                        <td>北京市西城区XX街道</td>
                        <td><span class="status-badge status-pending">待取件</span></td>
                        <td>孙八</td>
                        <td class="action-buttons">
                            <button class="btn-view" data-tracking-number="PKG778899" data-sender="孙七"
                                    data-receiver="周八" data-status="已发货" data-delivery-date=""><i
                                    class="fas fa-eye"></i></button>
                            <button class="btn-edit" data-tracking-number="PKG778899" data-sender="孙七"
                                    data-receiver="周八" data-status="已发货" data-delivery-date=""><i
                                    class="fas fa-edit"></i></button>
                        </td>
                    </tr>
                    <tr>
                        <td>PKG789012</td>
                        <td>赵六</td>
                        <td>13600136000</td>
                        <td>北京市朝阳区XX街道</td>
                        <td><span class="status-badge status-pending">待取件</span></td>
                        <td>周九</td>
                        <td class="action-buttons">
                            <button class="btn-view" data-id="1" data-name="海淀区路线1" data-start-point="warehouse A"
                                    data-end-point="海淀区配送中心" data-distance="10km" data-estimated-time="30分钟"
                                    data-status="正常" onclick="testButtonClick();"><i class="fas fa-eye"></i></button>
                        </td>
                    </tr>
                    <tr>
                        <td>PKG345678</td>
                        <td>孙七</td>
                        <td>13500135000</td>
                        <td>北京市东城区XX街道</td>
                        <td><span class="status-badge status-delivered">已送达</span></td>
                        <td>张三</td>
                        <td class="action-buttons">
                            <button class="btn-view" data-id="2" data-name="海淀区路线2" data-start-point="warehouse A"
                                    data-end-point="海淀区配送中心" data-distance="15km" data-estimated-time="45分钟"
                                    data-status="正常"><i class="fas fa-eye"></i></button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 编辑包裹模态框 -->
        <div class="modal hidden" id="edit-packages-modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>编辑包裹</h3>
                    <span class="close-modal">&times;</span>
                </div>
                <div class="modal-body">
                    <form id="edit-package-form">
                        <div class="form-group">
                            <label for="edit-package-tracking-number">运单编号</label>
                            <input type="text" id="edit-package-tracking-number" disabled>
                        </div>
                        <div class="form-group">
                            <label for="edit-package-sender">寄件人</label>
                            <input type="text" id="edit-package-sender" required>
                        </div>
                        <div class="form-group">
                            <label for="edit-package-sender-phone">寄件人电话</label>
                            <input type="tel" id="edit-package-sender-phone" required>
                        </div>
                        <div class="form-group">
                            <label for="edit-package-receiver">收件人</label>
                            <input type="text" id="edit-package-receiver" required>
                        </div>
                        <div class="form-group">
                            <label for="edit-package-receiver-phone">收件人电话</label>
                            <input type="tel" id="edit-package-receiver-phone" required>
                        </div>
                        <div class="form-group">
                            <label for="edit-package-address">收货地址</label>
                            <input type="text" id="edit-package-address" required>
                        </div>
                        <div class="form-group">
                            <label for="edit-package-status">包裹状态</label>
                            <select id="edit-package-status" required>
                                <option value="pending">待取件</option>
                                <option value="in-transit">运输中</option>
                                <option value="delivered">已送达</option>
                                <option value="canceled">已取消</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="edit-package-courier">物流员</label>
                            <input type="text" id="edit-package-courier">
                        </div>
                        <div class="form-group">
                            <label for="edit-package-send-date">发货时间</label>
                            <input type="date" id="edit-package-send-date">
                        </div>
                        <div class="form-group">
                            <label for="edit-package-estimated-date">预计送达时间</label>
                            <input type="date" id="edit-package-estimated-date">
                        </div>
                        <div class="modal-footer">
                            <button type="button" id="cancel-edit-package" class="btn-cancel">取消</button>
                            <button type="submit" class="btn-submit">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- 查看包裹模态框 -->
        <div class="modal hidden" id="view-packages-modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>包裹详情</h3>
                    <span class="close-modal">&times;</span>
                </div>
                <div class="modal-body">
                    <div class="package-detail-item">
                        <label>运单编号:</label>
                        <span id="view-package-tracking-number"></span>
                    </div>
                    <div class="package-detail-item">
                        <label>寄件人:</label>
                        <span id="view-package-sender"></span>
                    </div>
                    <div class="package-detail-item">
                        <label>寄件人电话:</label>
                        <span id="view-package-sender-phone"></span>
                    </div>
                    <div class="package-detail-item">
                        <label>收件人:</label>
                        <span id="view-package-receiver"></span>
                    </div>
                    <div class="package-detail-item">
                        <label>收件人电话:</label>
                        <span id="view-package-receiver-phone"></span>
                    </div>
                    <div class="package-detail-item">
                        <label>收货地址:</label>
                        <span id="view-package-address"></span>
                    </div>
                    <div class="package-detail-item">
                        <label>包裹状态:</label>
                        <span id="view-package-status"></span>
                    </div>
                    <div class="package-detail-item">
                        <label>物流员:</label>
                        <span id="view-package-courier"></span>
                    </div>
                    <div class="package-detail-item">
                        <label>发货时间:</label>
                        <span id="view-package-send-date"></span>
                    </div>
                    <div class="package-detail-item">
                        <label>预计送达时间:</label>
                        <span id="view-package-estimated-date"></span>
                    </div>
                    <div class="package-detail-item">
                        <label>实际送达时间:</label>
                        <span id="view-package-delivery-date"></span>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn-cancel" id="close-view-package-modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 角色权限 -->
        <div class="tab-content hidden" id="roles-tab">
            <h3 class="section-title">角色权限管理</h3>
            <div class="card-title">
                <a href="javascript:void(0)" class="add-button" onclick="openAddRoleModal()"><i
                        class="fas fa-user-plus"></i> 添加角色</a>
                <div class="search-bar">
                    <input type="text" placeholder="搜索角色...">
                    <button><i class="fas fa-search"></i> 搜索</button>
                </div>
            </div>

            <div id="role-list">
                <table>
                    <thead>
                    <tr>
                        <th>角色名称</th>
                        <th>角色描述</th>
                        <th>用户数量</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>普通用户</td>
                        <td>普通用户，只能查看和跟踪自己的包裹</td>
                        <td>126</td>
                        <td class="action-buttons">
                            <button class="btn-view" data-name="普通用户"
                                    data-description="普通用户，只能查看和跟踪自己的包裹" data-user-count="126"
                                    data-permissions="package_management"><i class="fas fa-eye"></i></button>
                            <button class="btn-edit"><i class="fas fa-edit"></i></button>
                            <button class="btn-delete"><i class="fas fa-trash-alt"></i></button>
                        </td>
                    </tr>
                    <tr>
                        <td>物流员</td>
                        <td>负责配送包裹的工作人员</td>
                        <td>8</td>
                        <td class="action-buttons">
                            <button class="btn-view" data-name="物流员" data-description="负责配送包裹的工作人员"
                                    data-user-count="8" data-permissions="package_management,route_management"><i
                                    class="fas fa-eye"></i></button>
                            <button class="btn-edit"><i class="fas fa-edit"></i></button>
                            <button class="btn-delete"><i class="fas fa-trash-alt"></i></button>
                        </td>
                    </tr>
                    <tr>
                        <td>管理员</td>
                        <td>系统管理员，拥有所有权限</td>
                        <td>2</td>
                        <td class="action-buttons">
                            <button class="btn-view" data-name="管理员" data-description="系统管理员，拥有所有权限"
                                    data-user-count="2"
                                    data-permissions="user_management,courier_management,package_management,route_management,role_management,exception_handling">
                                <i class="fas fa-eye"></i></button>
                            <button class="btn-edit"><i class="fas fa-edit"></i></button>
                            <button class="btn-delete"><i class="fas fa-trash-alt"></i></button>
                        </td>
                    </tr>
                    <tr>
                        <td>客服人员</td>
                        <td>处理客户咨询和投诉</td>
                        <td>5</td>
                        <td class="action-buttons">
                            <button class="btn-view" data-name="客服人员" data-description="处理客户咨询和投诉"
                                    data-user-count="5" data-permissions="package_management,exception_handling"><i
                                    class="fas fa-eye"></i></button>
                            <button class="btn-edit"><i class="fas fa-edit"></i></button>
                            <button class="btn-delete"><i class="fas fa-trash-alt"></i></button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 添加角色模态框 -->
        <div class="modal hidden" id="add-roles-modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>添加新角色</h3>
                    <span class="close-modal">&times;</span>
                </div>
                <div class="modal-body">
                    <form id="add-role-form">
                        <div class="form-group">
                            <label for="new-role-name">角色名称</label>
                            <input type="text" id="new-role-name" name="name" required placeholder="请输入角色名称">
                        </div>
                        <div class="form-group">
                            <label for="new-role-description">角色描述</label>
                            <textarea id="new-role-description" name="description" required
                                      placeholder="请输入角色描述"></textarea>
                        </div>
                        <div class="form-group">
                            <label>权限设置</label>
                            <div class="permission-checkboxes">
                                <div class="permission-item">
                                    <input type="checkbox" id="perm-user-management" name="permissions"
                                           value="user_management">
                                    <label for="perm-user-management">用户管理</label>
                                </div>
                                <div class="permission-item">
                                    <input type="checkbox" id="perm-courier-management" name="permissions"
                                           value="courier_management">
                                    <label for="perm-courier-management">物流员管理</label>
                                </div>
                                <div class="permission-item">
                                    <input type="checkbox" id="perm-package-management" name="permissions"
                                           value="package_management">
                                    <label for="perm-package-management">包裹管理</label>
                                </div>
                                <div class="permission-item">
                                    <input type="checkbox" id="perm-route-management" name="permissions"
                                           value="route_management">
                                    <label for="perm-route-management">路线管理</label>
                                </div>
                                <div class="permission-item">
                                    <input type="checkbox" id="perm-role-management" name="permissions"
                                           value="role_management">
                                    <label for="perm-role-management">角色管理</label>
                                </div>
                                <div class="permission-item">
                                    <input type="checkbox" id="perm-exception-handling" name="permissions"
                                           value="exception_handling">
                                    <label for="perm-exception-handling">异常处理</label>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn-cancel" id="cancel-add-role">取消</button>
                            <button type="submit" class="btn-submit">添加角色</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- 编辑角色模态框 -->
        <div class="modal hidden" id="edit-roles-modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>编辑角色信息</h3>
                    <span class="close-modal" id="close-edit-role-modal">&times;</span>
                </div>
                <div class="modal-body">
                    <form id="edit-role-form">
                        <input type="hidden" id="edit-role-id" name="id">
                        <div class="form-group">
                            <label for="edit-role-name">角色名称</label>
                            <input type="text" id="edit-role-name" name="name" required>
                        </div>
                        <div class="form-group">
                            <label for="edit-role-description">角色描述</label>
                            <textarea id="edit-role-description" name="description" required></textarea>
                        </div>
                        <div class="form-group">
                            <label>权限设置</label>
                            <div class="permission-checkboxes">
                                <div class="permission-item">
                                    <input type="checkbox" id="edit-perm-user-management" name="edit-permissions"
                                           value="user_management">
                                    <label for="edit-perm-user-management">用户管理</label>
                                </div>
                                <div class="permission-item">
                                    <input type="checkbox" id="edit-perm-courier-management" name="edit-permissions"
                                           value="courier_management">
                                    <label for="edit-perm-courier-management">物流员管理</label>
                                </div>
                                <div class="permission-item">
                                    <input type="checkbox" id="edit-perm-package-management" name="edit-permissions"
                                           value="package_management">
                                    <label for="edit-perm-package-management">包裹管理</label>
                                </div>
                                <div class="permission-item">
                                    <input type="checkbox" id="edit-perm-route-management" name="edit-permissions"
                                           value="route_management">
                                    <label for="edit-perm-route-management">路线管理</label>
                                </div>
                                <div class="permission-item">
                                    <input type="checkbox" id="edit-perm-role-management" name="edit-permissions"
                                           value="role_management">
                                    <label for="edit-perm-role-management">角色管理</label>
                                </div>
                                <div class="permission-item">
                                    <input type="checkbox" id="edit-perm-exception-handling" name="edit-permissions"
                                           value="exception_handling">
                                    <label for="edit-perm-exception-handling">异常处理</label>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn-cancel" id="cancel-edit-role">取消</button>
                            <button type="submit" class="btn-submit">保存修改</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- 删除角色模态框 -->
        <div class="modal hidden" id="delete-roles-modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>确认删除</h3>
                    <span class="close-modal" id="close-delete-role-modal">&times;</span>
                </div>
                <div class="modal-body">
                    <form id="delete-role-form">
                        <input type="hidden" id="delete-role-id" name="id">
                        <p>确定要删除该角色吗？此操作不可撤销。</p>
                        <p>角色名称: <span id="delete-role-name"></span></p>
                        <p>该角色下有 <span id="delete-role-user-count"></span> 名用户将受到影响。</p>
                        <div class="modal-footer">
                            <button type="button" class="btn-cancel" id="cancel-delete-role">取消</button>
                            <button type="submit" class="btn-delete">删除</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- 查看角色模态框 -->
        <div class="modal hidden" id="view-roles-modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>角色详情</h3>
                    <span class="close-modal">&times;</span>
                </div>
                <div class="modal-body">
                    <div class="detail-item">
                        <span class="detail-label">角色名称:</span>
                        <span id="view-role-name"></span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">角色描述:</span>
                        <span id="view-role-description"></span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">用户数量:</span>
                        <span id="view-role-user-count"></span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">权限列表:</span>
                        <ul id="view-role-permissions"></ul>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn-cancel" id="close-view-role-modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 路线管理 -->
        <div class="tab-content hidden" id="routes-tab">
            <h3 class="section-title">配送路线管理</h3>
            <div class="card-title">
                <a href="#" class="add-button"><i class="fas fa-plus"></i> 添加路线</a>
                <div class="search-bar">
                    <input type="text" placeholder="搜索路线...">
                    <button><i class="fas fa-search"></i> 搜索</button>
                </div>
            </div>

            <div id="route-list">
                <table>
                    <thead>
                    <tr>
                        <th>路线名称</th>
                        <th>起点</th>
                        <th>终点</th>
                        <th>负责人</th>
                        <th>预计时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>海淀区路线1</td>
                        <td> warehouse A</td>
                        <td> 海淀区配送中心</td>
                        <td>张三</td>
                        <td>30分钟</td>
                        <td class="action-buttons">
                            <button class="btn-view" data-id="3" data-name="朝阳区路线1" data-start-point="warehouse B"
                                    data-end-point="朝阳区配送中心" data-distance="20km" data-estimated-time="50分钟"
                                    data-status="正常"><i class="fas fa-eye"></i></button>
                            <button class="btn-edit"><i class="fas fa-edit"></i></button>
                            <button class="btn-delete"><i class="fas fa-trash-alt"></i></button>
                        </td>
                    </tr>
                    <tr>
                        <td>海淀区路线2</td>
                        <td> warehouse A</td>
                        <td> 海淀区配送中心</td>
                        <td>钱七</td>
                        <td>45分钟</td>
                        <td class="action-buttons">
                            <button class="btn-view" data-id="4" data-name="西城区路线1" data-start-point="warehouse C"
                                    data-end-point="西城区配送中心" data-distance="12km" data-estimated-time="40分钟"
                                    data-status="正常"><i class="fas fa-eye"></i></button>
                            <button class="btn-edit"><i class="fas fa-edit"></i></button>
                            <button class="btn-delete"><i class="fas fa-trash-alt"></i></button>
                        </td>
                    </tr>
                    <tr>
                        <td>朝阳区路线1</td>
                        <td> warehouse B</td>
                        <td> 朝阳区配送中心</td>
                        <td>周九</td>
                        <td>50分钟</td>
                        <td class="action-buttons">
                            <button class="btn-view"><i class="fas fa-eye"></i></button>
                            <button class="btn-edit"><i class="fas fa-edit"></i></button>
                            <button class="btn-delete"><i class="fas fa-trash-alt"></i></button>
                        </td>
                    </tr>
                    <tr>
                        <td>西城区路线1</td>
                        <td> warehouse C</td>
                        <td> 西城区配送中心</td>
                        <td>孙八</td>
                        <td>40分钟</td>
                        <td class="action-buttons">
                            <button class="btn-view"><i class="fas fa-eye"></i></button>
                            <button class="btn-edit"><i class="fas fa-edit"></i></button>
                            <button class="btn-delete"><i class="fas fa-trash-alt"></i></button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 添加路线模态框 -->
        <div class="modal hidden" id="add-routes-modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>添加新路线</h3>
                    <span class="close-modal">&times;</span>
                </div>
                <div class="modal-body">
                    <form id="add-route-form">
                        <div class="form-group">
                            <label for="new-route-name">路线名称</label>
                            <input type="text" id="new-route-name" name="name" required placeholder="请输入路线名称">
                        </div>
                        <div class="form-group">
                            <label for="new-route-start">起点</label>
                            <input type="text" id="new-route-start" name="start" required placeholder="请输入起点">
                        </div>
                        <div class="form-group">
                            <label for="new-route-end">终点</label>
                            <input type="text" id="new-route-end" name="end" required placeholder="请输入终点">
                        </div>
                        <div class="form-group">
                            <label for="new-route-courier">负责人</label>
                            <select id="new-route-courier" name="courier" required>
                                <option value="">请选择物流员</option>
                                <!-- 选项将通过JavaScript动态加载 -->
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="new-route-estimated-time">预计时间（分钟）</label>
                            <input type="number" id="new-route-estimated-time" name="estimatedTime" required
                                   placeholder="请输入预计时间">
                        </div>
                        <div class="form-group">
                            <label for="new-route-description">路线描述</label>
                            <textarea id="new-route-description" name="description"
                                      placeholder="请输入路线描述"></textarea>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn-cancel" id="cancel-add-route">取消</button>
                            <button type="submit" class="btn-submit">添加路线</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- 查看路线模态框 -->
        <div class="modal hidden" id="view-routes-modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>路线详情</h3>
                    <span class="close-modal">&times;</span>
                </div>
                <div class="modal-body">
                    <div class="route-detail-item">
                        <label>路线名称:</label>
                        <span id="view-route-name"></span>
                    </div>
                    <div class="route-detail-item">
                        <label>起点:</label>
                        <span id="view-route-start"></span>
                    </div>
                    <div class="route-detail-item">
                        <label>终点:</label>
                        <span id="view-route-end"></span>
                    </div>
                    <div class="route-detail-item">
                        <label>负责人:</label>
                        <span id="view-route-courier"></span>
                    </div>
                    <div class="route-detail-item">
                        <label>预计时间:</label>
                        <span id="view-route-estimated-time"></span>
                    </div>
                    <div class="route-detail-item">
                        <label>路线描述:</label>
                        <span id="view-route-description"></span>
                    </div>
                    <div class="route-detail-item">
                        <label>创建时间:</label>
                        <span id="view-route-created-time"></span>
                    </div>
                    <div class="route-detail-item">
                        <label>最后更新时间:</label>
                        <span id="view-route-updated-time"></span>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn-cancel" id="close-view-route-modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 编辑路线模态框 -->
        <div class="modal hidden" id="edit-routes-modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>编辑路线信息</h3>
                    <span class="close-modal">&times;</span>
                </div>
                <div class="modal-body">
                    <form id="edit-route-form">
                        <input type="hidden" id="edit-route-id" name="id">
                        <div class="form-group">
                            <label for="edit-route-name">路线名称</label>
                            <input type="text" id="edit-route-name" name="name" required>
                        </div>
                        <div class="form-group">
                            <label for="edit-route-start">起点</label>
                            <input type="text" id="edit-route-start" name="start" required>
                        </div>
                        <div class="form-group">
                            <label for="edit-route-end">终点</label>
                            <input type="text" id="edit-route-end" name="end" required>
                        </div>
                        <div class="form-group">
                            <label for="edit-route-courier">负责人</label>
                            <select id="edit-route-courier" name="courier" required>
                                <option value="">请选择物流员</option>
                                <!-- 选项将通过JavaScript动态加载 -->
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="edit-route-estimated-time">预计时间（分钟）</label>
                            <input type="number" id="edit-route-estimated-time" name="estimatedTime" required>
                        </div>
                        <div class="form-group">
                            <label for="edit-route-description">路线描述</label>
                            <textarea id="edit-route-description" name="description"></textarea>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn-cancel" id="cancel-edit-route">取消</button>
                            <button type="submit" class="btn-submit">保存修改</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- 删除路线模态框 -->
        <div class="modal hidden" id="del-routes-modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>确认删除</h3>
                    <span class="close-modal">&times;</span>
                </div>
                <div class="modal-body">
                    <p>确定要删除该路线吗？此操作不可撤销。</p>
                    <p id="del-route-name"></p>
                    <div class="modal-footer">
                        <button type="button" class="btn-cancel" id="cancel-del-route">取消</button>
                        <button type="button" class="btn-delete" id="confirm-del-route">删除</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 异常处理 -->
        <div class="tab-content hidden" id="exceptions-tab">
            <h3 class="section-title">异常包裹处理</h3>
            <div class="card-title">
                <div></div>
                <div class="search-bar">
                    <input type="text" placeholder="搜索异常...">
                    <button><i class="fas fa-search"></i> 搜索</button>
                </div>
            </div>

            <div id="exception-list">
                <table>
                    <thead>
                    <tr>
                        <th>运单编号</th>
                        <th>异常类型</th>
                        <th>发生时间</th>
                        <th>处理状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>PKG445566</td>
                        <td>收件人拒收</td>
                        <td>2023-08-10 09:15</td>
                        <td>已处理</td>
                        <td class="action-buttons">
                            <button class="btn-view"><i class="fas fa-eye"></i></button>
                            <button class="btn-edit"><i class="fas fa-edit"></i></button>
                            <button class="btn-delete"><i class="fas fa-trash-alt"></i></button>
                        </td>
                    </tr>
                    <tr>
                        <td>PKG778899</td>
                        <td>地址错误</td>
                        <td>2023-08-12 14:30</td>
                        <td>待处理</td>
                        <td class="action-buttons">
                            <button class="btn-view"><i class="fas fa-eye"></i></button>
                            <button class="btn-edit"><i class="fas fa-edit"></i></button>
                            <button class="btn-delete"><i class="fas fa-trash-alt"></i></button>
                        </td>
                    </tr>
                    <tr>
                        <td>PKG223344</td>
                        <td>包裹损坏</td>
                        <td>2023-08-15 10:45</td>
                        <td>处理中</td>
                        <td class="action-buttons">
                            <button class="btn-view"><i class="fas fa-eye"></i></button>
                            <button class="btn-edit"><i class="fas fa-edit"></i></button>
                            <button class="btn-delete"><i class="fas fa-trash-alt"></i></button>
                        </td>
                    </tr>
                    <tr>
                        <td>PKG556677</td>
                        <td>丢失</td>
                        <td>2023-08-18 08:20</td>
                        <td>待处理</td>
                        <td class="action-buttons">
                            <button class="btn-view"><i class="fas fa-eye"></i></button>
                            <button class="btn-edit"><i class="fas fa-edit"></i></button>
                            <button class="btn-delete"><i class="fas fa-trash-alt"></i></button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 查看异常模态框 -->
        <div class="modal hidden" id="view-exceptions-modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>异常详情</h3>
                    <span class="close-modal">&times;</span>
                </div>
                <div class="modal-body">
                    <div class="exception-detail-item">
                        <label>运单编号:</label>
                        <span id="view-exception-tracking-number"></span>
                    </div>
                    <div class="exception-detail-item">
                        <label>异常类型:</label>
                        <span id="view-exception-type"></span>
                    </div>
                    <div class="exception-detail-item">
                        <label>发生时间:</label>
                        <span id="view-exception-time"></span>
                    </div>
                    <div class="exception-detail-item">
                        <label>处理状态:</label>
                        <span id="view-exception-status"></span>
                    </div>
                    <div class="exception-detail-item">
                        <label>异常描述:</label>
                        <span id="view-exception-description"></span>
                    </div>
                    <div class="exception-detail-item">
                        <label>处理记录:</label>
                        <div id="view-exception-handling-records"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn-cancel" id="close-view-exception-modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 编辑异常模态框 -->
        <div class="modal hidden" id="edit-exceptions-modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>处理异常</h3>
                    <span class="close-modal">&times;</span>
                </div>
                <div class="modal-body">
                    <form id="edit-exception-form">
                        <input type="hidden" id="edit-exception-id" name="id">
                        <div class="form-group">
                            <label for="edit-exception-type">异常类型</label>
                            <select id="edit-exception-type" name="type" required>
                                <option value="recipient-refuse">收件人拒收</option>
                                <option value="address-error">地址错误</option>
                                <option value="package-damage">包裹损坏</option>
                                <option value="lost">丢失</option>
                                <option value="other">其他异常</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="edit-exception-status">处理状态</label>
                            <select id="edit-exception-status" name="status" required>
                                <option value="pending">待处理</option>
                                <option value="processing">处理中</option>
                                <option value="resolved">已处理</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="edit-exception-description">异常描述</label>
                            <textarea id="edit-exception-description" name="description" required></textarea>
                        </div>
                        <div class="form-group">
                            <label for="edit-exception-handling-note">处理备注</label>
                            <textarea id="edit-exception-handling-note" name="handlingNote"
                                      placeholder="请输入处理备注"></textarea>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn-cancel" id="cancel-edit-exception">取消</button>
                            <button type="submit" class="btn-submit">保存处理结果</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- 删除异常模态框 -->
        <div class="modal hidden" id="del-exceptions-modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>确认删除</h3>
                    <span class="close-modal">&times;</span>
                </div>
                <div class="modal-body">
                    <p>确定要删除该异常记录吗？此操作不可撤销。</p>
                    <p>运单编号: <span id="del-exception-tracking-number"></span></p>
                    <p>异常类型: <span id="del-exception-type"></span></p>
                    <div class="modal-footer">
                        <button type="button" class="btn-cancel" id="cancel-del-exception">取消</button>
                        <button type="button" class="btn-delete" id="confirm-del-exception">删除</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

<footer>
    <div class="container footer-container">
        <div class="footer-section">
            <h3>关于我们</h3>
            <p>物流追踪系统致力于为用户提供高效、便捷、可靠的物流信息追踪服务，让物流变得更加透明和可控。</p>
            <div class="social-links">
                <a href="#"><i class="fab fa-weixin"></i></a>
                <a href="#"><i class="fab fa-weibo"></i></a>
                <a href="#"><i class="fab fa-qq"></i></a>
            </div>
        </div>
        <div class="footer-section">
            <h3>快速链接</h3>
            <ul>
                <li><a href="../../index.html">首页</a></li>
                <li><a href="../../pages/user/dashboard.html">用户中心</a></li>
                <li><a href="../../pages/courier/dashboard.html">物流员中心</a></li>
                <li><a href="dashboard.html">管理员中心</a></li>
            </ul>
        </div>
        <div class="footer-section">
            <h3>帮助中心</h3>
            <ul>
                <li><a href="#">常见问题</a></li>
                <li><a href="#">使用指南</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">隐私政策</a></li>
                <li><a href="#">服务条款</a></li>
            </ul>
        </div>
        <div class="footer-section">
            <h3>联系我们</h3>
            <ul>
                <li><i class="fas fa-phone"></i> 400-123-4567</li>
                <li><i class="fas fa-envelope"></i> support@wuliuzhuizong.com</li>
                <li><i class="fas fa-map-marker-alt"></i> 北京市朝阳区物流大厦15层</li>
            </ul>
        </div>
    </div>
    <div class="container footer-bottom">
        <p>&copy; 2023 物流追踪系统 版权所有</p>
    </div>
</footer>

<!-- 模态框背景遮罩 -->
<div class="modal-overlay hidden"></div>

<!-- 加载指示器 -->
<div id="loading-indicator" class="loading-indicator hidden">
    <div class="loading-spinner"></div>
    <div class="loading-text">加载中...</div>
</div>

<!-- 顶部通知卡片 -->
<div id="top-notification" class="top-notification hidden">
    <div class="notification-content">
        <span id="notification-message"></span>
        <button id="close-notification" class="close-notification-btn"><i class="fas fa-times"></i></button>
    </div>
</div>
<script>
    // 动态加载脚本，防止浏览器缓存
    function loadScript(src) {
        const script = document.createElement('script');
        script.src = src + '?t=' + new Date().getTime();
        document.head.appendChild(script);
    }

    // 按顺序加载脚本
    loadScript('../../js/jquery-3.7.1.min.js');
    loadScript('../../js/utils.js');
    loadScript('../../js/api.js');
    loadScript('../../js/management.js');

</script>
</body>
</html>